<template>
    <div id="app" class="th-container-body f-container-c">
        <th-header></th-header>
        <div class="tips-bg" :class="{isFixed: tipsBarFixed}">
            <p class="tips-info">
                {{ $t("updateTips") }}
            </p>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tipsBarFixed: false
        }
    },

    mounted() {
        window.addEventListener("scroll", this.handleScroll)
    },

    methods: {
        handleScroll() {
            let scrollTop =
                window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            // let offsetTop = document.querySelector('#th-header').offsetTop
            this.tipsBarFixed = scrollTop > 60 // 60px是导航标题头的高度！！。
        }
    }
}
</script>

<style lang="less">
#app {
    position: relative;
    display: block;
    width: 100%;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

.tips-bg {
    &.isFixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }
    display: block;
    background-color: rgba(180, 164, 114, 0.92);
    width: 100%;
    //  height: 70px;
    .tips-info {
        width: 100%;
        font-size: 16px;
        font-weight: both;
        text-align: left;
        color: #393535;
        padding: 15px 50px 15px;
    }
}
</style>
